<template>
  <div class="app-container">
    <el-dialog :title="pageTitle" :visible.sync="dialogFormVisible" :before-close="beforeClose" width="60%">
      <el-form :label-position="labelPosition">

        <el-form-item label="店铺团队奖励名称" :label-width="formLabelWidth">
          <el-input v-model="form.awardName" minlength="1" maxlength="10" placeholder="请输入店铺团队奖励名称" @change="getName($event)" />
        </el-form-item>

        <el-form-item :label="labelText" :label-width="formLabelWidth">
          <template>
            <el-select v-model="form.minLevel" :placeholder="labelText">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-form-item>

        <el-form-item label="N级内订单倍率" :label-width="formLabelWidth">
          <el-input-number v-model="form.nInner" :min="0" size="medium" controls-position="right" /> %
        </el-form-item>

        <el-form-item label="N级数目：" :label-width="formLabelWidth">
          <el-input-number v-model="form.divisionNum" :min="0" size="medium" controls-position="right" @change="radioInner($event)" /> 级
        </el-form-item>

        <div v-for="val in form.radioInner" :key="val.id" class="border_input">
          <el-form-item :label="val.text" :label-width="formLabelWidth">
            <el-input-number v-model="val.radio" :min="0" size="medium" controls-position="right" /> %
          </el-form-item>
        </div>

        <el-form-item label="N级外每代可得比例" :label-width="formLabelWidth">
          <el-input-number v-model="form.radioOuter" :min="0" size="medium" controls-position="right" /> %
        </el-form-item>

        <el-form-item label="N级外分发代数" :label-width="formLabelWidth">
          <el-input-number v-model="form.relaNum" :min="0" size="medium" controls-position="right" /> 代
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="canel">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import { iniAward, handle } from '@/api/award'
export default {
  name: 'AwardHandle',
  data() {
    return {
      labelPosition: 'right',
      formLabelWidth: '220px',
      pageTitle: '店铺分享经济编辑界面',
      dialogFormVisible: false,
      id: '',
      title: '',
      options: [], // label 文字 / value 等级
      form: {
        awardName: '订单指数',
        minLevel: 0,
        divisionNum: 3,
        nInner: 100,
        radioInner: [
          { 'rela': 1, 'radio': 10, 'text': '第一代比例：' },
          { 'rela': 2, 'radio': 5, 'text': '第二代比例：' },
          { 'rela': 3, 'radio': 2, 'text': '第三代比例：' }
        ],
        radioOuter: 4,
        relaNum: 25
      },
      labelText: '最低可得订单指数等级',
    }
  },

  methods: {
    beforeClose() {
      this.canel()
    },

    // 进入界面事件
    ini(id, title) {
      // 初始化 店铺等级 数据
      this.id = id
      this.title = title
      this.dialogFormVisible = true
      this.pageTitle = '[' + this.id + ': ' + this.title + '] 店铺团队奖励编辑界面'
      var params = {}
      params.id = id

      this.iniAward(params)
    },

    // 初始化界面赋值
    iniAward(params) {
      iniAward(params).then(response => {
        this.form = response.data.data
        this.options = response.data.grade
        console.log(this.form)
        console.log(this.options)
      })
    },

    // 输入框内容变化，团队奖励名称改变
    getName(e) {
      this.form.awardName = e
      this.labelText = '最低可得'+ e +'等级'
    },

    // N变化时 , 输入框的变化
    radioInner(e) {
      // 获取 奖金来源/分享级数/分享方式 , 得出输出框数目 和 对应文字(后台方法)
      console.log(e)
      var innerArr = []
      var nNum = this.form.divisionNum
      for (var i = 1; i <= nNum; i++) {
        var k = i - 1
        innerArr[k] = {}
        innerArr[k].rela = i
        innerArr[k].radio = 0
        innerArr[k].text = '第 ' + i + ' 代比例：'
      }
      console.log(innerArr)
      this.form.radioInner = innerArr
      console.log(this.form.radioInner)
    },

    // 关闭界面事件
    canel() {
      this.dialogFormVisible = false
    },

    // 提交事件
    sure() {
      console.log(this.form)
      handle({ data: this.form, id: this.id }).then(res => {
        console.log(res)
        Message({
          message: res.data.info,
          type: 'success',
          duration: 2000
        })
        this.$emit('afterSave')
        this.canel()
      })
    }
  }
}
</script>
<style>
.border_input{
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 10px 20px;
  margin: 20px;
}
.block{
  margin-top: 20px;
}
</style>
